<ion-header>
  <ion-toolbar>
    <ion-buttons left>
      <button ion-button icon-left (click)="navBack()">
        <ion-icon class="nav-back" name="arrow-back"></ion-icon>
      </button>
    </ion-buttons>

    <ion-title>{{"wifiTitle" | translate}}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list inset>
    <div class="title-box">
      <ion-icon class="wifi-icon" name="wifi"></ion-icon>
      <div class="wifi-ssid">{{ssid}}</div>
    </div>

    <form [formGroup]="group" novalidate autocomplete="off">
    <ion-item>
      <ion-input *ngIf="!showPassword" placeholder="{{'wifiPassword' | translate}}" type="password" formControlName="password"></ion-input>
      <ion-input *ngIf="showPassword" placeholder="{{'wifiPassword' | translate}}" type="text" formControlName="password"></ion-input>
      <button icon-only ion-button clear [color]="showPassword ? 'calm' : 'dark'" type="button" item-right (click)="showPassword = !showPassword">
        <ion-icon name="eye"> </ion-icon>
      </button>
    </ion-item>
    </form>

    <button class="wifi-btn" ion-button full color="light" (click)="configure()" [disabled]="group.invalid || configInProgress || jobSucceeded">{{"wifiConnect" | translate}}</button>

    <div *ngIf="jobSucceeded">{{"wifiSucc" | translate: {ip: deviceIp} }}</div>
    <div *ngIf="configInProgress">{{"isConfiguring" | translate}}{{configStatus}}</div>
  </ion-list>
</ion-content>
